<template>
  <div class="rank">
    <div class="rank-menu">
      <div class="menu-title">云音乐榜单</div>
      <div class="menu-item" @click="seen2=false,seen1=true">
        <div class="item-pic">
          <img src="/imgs/新歌榜.jpg" />
        </div>
        <span class="item-title">云音乐新歌榜</span>
        <span class="item-title grey">每天更新</span>
      </div>
      <div class="menu-item" @click="seen2=true,seen1=false">
        <div class="item-pic">
          <img src="/imgs/热歌榜.jpg" />
        </div>
        <span class="item-title">云音乐热歌榜</span>
        <span class="item-title grey">每天更新</span>
      </div>
    </div>
    <div class="rank-content" v-if="seen1">
      <div class="rank-head">
        <div class="head-img">
          <img src="/imgs/新歌榜.jpg" />
        </div>
        <div class="head-title">
          <h2>云音乐新歌榜</h2>
        </div>
      </div>
      <div class="rank-list">
        <div class="list-title">
          <span class="list-name">歌曲列表</span>
        </div>
        <div class="rank-table">
          <el-table :data="songData" style="width: 100%;margin-top:20px">
            <el-table-column fixed prop="id" label width="48"></el-table-column>
            <el-table-column label="标题">
              <template slot-scope="scope">
                <a :href="'/songPlay?id='+ scope.row.sid" target="_blank">
                  <span>{{scope.row.title}}</span>
                  <i class="el-icon-video-play"></i>
                </a>
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="时长" width="120"></el-table-column>
            <el-table-column prop="singer" label="歌手" width="120"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="rank-content" v-if="seen2">
      <div class="rank-head">
        <div class="head-img">
          <img src="/imgs/热歌榜.jpg" />
        </div>
        <div class="head-title">
          <h2>云音乐热歌榜</h2>
        </div>
      </div>
      <div class="rank-list">
        <div class="list-title">
          <span class="list-name">歌曲列表</span>
        </div>
        <div class="rank-table">
          <el-table :data="hotsongData" style="width: 100%;margin-top:20px">
            <el-table-column fixed prop="id" label width="48"></el-table-column>
            <el-table-column label="标题">
              <template slot-scope="scope">
                <a :href="'/songPlay?id='+ scope.row.sid " target="_blank">
                <span>{{scope.row.title}}</span>
                <i class="el-icon-video-play"></i>
                </a>
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="时长" width="120"></el-table-column>
            <el-table-column prop="singer" label="歌手" width="120"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="module">
var songs = [];
var hotsongs = []
module.exports = {
  data: function() {
    return {
      songData: songs,
      hotsongData: hotsongs,
      seen1: true,
      seen2: false
    }
  },
  methods: {
    getSongData() {
      $.ajax({
        url: "/newSongLists",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          console.log(data);
          for(let i in data.songLists) {
            let singers = '';
            // console.log(data.songLists[i].combinations)
            if( data.songLists[i].combinations.length != 0) {
              // console.log(data.songLists[i].combinations)
              for(let j in data.songLists[i].combinations) {
                singers = singers + data.songLists[i].combinations[j].name;
              }
            } else {
              for(let j in data.songLists[i].singers) {
                singers = singers + data.songLists[i].singers[j].chinesename;
              }
            }
            songs[i] = {
              id: parseInt(i)+1,
              sid: data.songLists[i].id,
              title: data.songLists[i].name,
              duration: data.songLists[i].duration,
              singer: singers
            }
          }
        }
      });
      this.songData = songs;
    },
    getHotSongData() {
      $.ajax({
        url: "/hotSongLists",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          console.log(data);
          for(let i in data.songLists) {
            let singers = '';
            // console.log(data.songLists[i].combinations)
            if( data.songLists[i].combinations.length != 0) {
              // console.log(data.songLists[i].combinations)
              for(let j in data.songLists[i].combinations) {
                singers = singers + data.songLists[i].combinations[j].name;
              }
            } else {
              for(let j in data.songLists[i].singers) {
                singers = singers + data.songLists[i].singers[j].chinesename;
              }
            }
            hotsongs[i] = {
              id: parseInt(i)+1,
              sid: data.songLists[i].id,
              title: data.songLists[i].name,
              duration: data.songLists[i].duration,
              singer: singers
            }
          }
        }
      });
      this.hotsongData = hotsongs;
    },
    songPlay(id) {
      'spngPlay?id='+ id 
    }
  },
  mounted: function() {
    this.getSongData();
    this.getHotSongData();
  }
};
</script>
